<template>
	<view class="page-custom-pay-popup">
		<u-popup :show="show" :round="16" mode="bottom" @close="close" @open="open">
			<view class="pay-box">
				<view class="pay-title">
					<image class="back-icon" @tap="close" src="/static/other/back.svg" mode=""></image>
					<text class="title-text">{{title}}</text>
				</view>
				<view class="pay-amount">
					<view class="pay-amount-title">
						<text>{{ payAmountComputed }}</text>
						<text class="pay-amount-unit">{{current.unit}}</text>
					</view>
					<view v-show="current.id==='beanPay'" class="pay-amount-desc">10金豆=1元</view>
				</view>
				<view class="pay-list">
					<view class="pay-item flex-between-center" v-for="(item,index) in payList" :key="index"
						@tap="onClickItem(item)">
						<view class="left-wrap">
							<image class="list-icon" :src="item.icon" mode=""></image>
							<text class="normal-title">
								<text>{{item.name}}</text>
								<template v-if="item.id === 'beanPay'">
									<text>（余额：{{restBean}}金豆）</text>
									<text v-if="beanNoEnough" @click="toPage('/pages/my/voucherCenter')" class="desc">余额不足请<text class="blue-text underline font-17 bold">充值</text></text>
								</template>
							</text>
						</view>
						<image v-if="payList.length > 1 && current.id === item.id" class="check-icon" src="/static/other/check-pain.svg" mode=""></image>
					</view>
				</view>
				<view class="custom-button full-button" @tap="onSubmit">
					<u-button type="primary" shape="circle" text="立即支付"></u-button>
				</view>
			</view>
		</u-popup>
	</view>


</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive,
		defineEmits,
		defineProps,
		computed,
	} from "vue";
	import { onLoad } from '@dcloudio/uni-app'
	import {
		getUserInfo
	} from "@/common/js/method";
	onMounted(()=>{
		if(props.payTypes.includes('beanPay')) {
			payList.value = allPayList.filter(item => props.payTypes.includes(item.id));
			current.value = payList.value[0];
			return;
		}
		uni.getProvider({
			service: 'payment',
			success(res) {
				console.log('res.provider', res.provider)
				payList.value = allPayList.filter(item => res.provider.includes(item.id));
				current.value = payList.value[0];
				// console.log(res.provider[0], 'providerLoad')
			},
			fail(err) {
				console.log(err, 'providerErr')
			}
		});
	})
	const props = defineProps({
		payAmount: {
			type: Number,
			default: 0,
		},
		show: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: '应付款',
		},
		payTypes: {
			type: Array,
			default: () => ['other'],
		},
	});
	// const provider = ref('');
	const loginProvider = uni.getStorageSync('loginProvider');
	const allPayList = reactive([{
			id: 'wxpay',
			name: '微信支付',
			icon: '/static/other/wechat-pay.svg',
			unit: '元',
		},{
			id: 'alipay',
			name: '支付宝支付',
			icon: '/static/other/alipay.png',
			unit: '元',
		},{
			id: 'toutiao',
			name: '抖音支付',
			icon: '/static/other/dychat.svg',
			unit: '元',
		},
		{
			id: 'kuaishoupay',
			name: '快手支付',
			icon: '/static/other/dychat.svg', //TODO:更换图标
			unit: '元',
		},
		{
			id: 'beanPay',
			name: '金豆支付',
			icon: '/static/other/gold-bean.svg',
			unit: '金豆',
		},
	]);
	const restBean = ref(0);

	const payList = ref([]);
	const getRestAmount = async () => {
		const { goldenBean } = uni.getStorageSync('userInfo');
		restBean.value = goldenBean;
	}
	if (props.payTypes.includes('beanPay')) {
		getRestAmount();
	}
	
	const current = ref({
		unit:''
	});
	const emit = defineEmits(['update:show', 'close', 'open', 'paySuccess', 'payFailed', 'pay']);

	const payAmountComputed = computed(() => {
		return current.value.unit === '元' ? props.payAmount / 100 : props.payAmount;
	})
	
	const toPage = (path) => {
		uni.navigateTo({
			url: path,
		})
	};
	
	const beanNoEnough = computed(() => {
		return restBean.value < payAmountComputed.value;
	});

	const close = () => {
		emit('update:show', false);
		emit('close');
	}
	const open = () => {
		emit('update:show', true);
		emit('open');
	}

	const onClickItem = (item) => {
		current.value = item;
	}

	const onSubmit = () => {
		if (current.value.id === 'beanPay') { //金豆支付
			emit('pay', {
				type: 'beanPay'
			})
		} else { // 现金支付
			emit('pay', {
				type: current.value.id,
				callback: onPay,
			})
		}
	}

	// 确认支付
	const onPay = async (payInfo) => {
		console.log('支付需要的信息', payInfo)
		const {
			orderNo,
		} = payInfo;

		// 0元，直接支付成功
		if(+props.payAmount === 0) {
			emit('paySuccess', {
				orderNo
			});
			return;
		}
		await uni.$pay(payInfo);
		emit('update:show', false);
		emit('paySuccess', {
			orderNo
		});
	}
</script>

<style lang="scss" scoped>
	.page-custom-pay-popup {
		.pay-box {
			padding: 16px 16px 34px 16px;
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.pay-title {
			display: flex;

			.back-icon {
				width: 24px;
				height: 24px;
			}

			.title-text {
				text-align: center;
				flex: 1;
				font-size: 16px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 24px;
				color: rgba(0, 0, 0, 1);
			}
		}

		.pay-amount {
			text-align: center;

			.pay-amount-title {
				height: 53px;
				display: flex;
				justify-content: center;
				align-items: baseline;
				font-size: 36px;
				color: rgba(56, 56, 56, 1);
			}

			.pay-amount-unit {
				font-size: 16px;
			}

			.pay-amount-desc {
				font-size: 12px;
				line-height: 18px;
				color: rgba(166, 166, 166, 1);
			}
		}



		.pay-list {
			.pay-item {
				height: 56px;
			}

			.left-wrap {
				display: flex;
				align-items: center;
				gap: 5px;
			}

			.list-icon {
				width: 24px;
				height: 24px;
			}

			.check-icon {
				width: 24px;
				height: 24px;
			}
		}
	}
</style>